<template>
	<router-view />
	<van-tabbar
		v-model="active"
		v-if="
			r &&
			active.indexOf('product') == -1 &&
			active.indexOf('login') == -1
		"
	>
		<van-tabbar-item
			:icon="item.icon"
			v-for="item in tabber"
			:key="item.title"
			:name="item.path"
			@click="changePath(item)"
		>
			{{ item.title }}
		</van-tabbar-item>
	</van-tabbar>
</template>
<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const store = useStore();

const route = useRoute();
const router = useRouter();
const active = ref("/home");
const r = ref(null);
const tabber = ref([
	{
		title: "首页",
		path: "/home",
		icon: "home-o",
	},
	{
		title: "测试",
		path: "/test",
		icon: "notes-o",
	},
	{
		title: "扩展阅读",
		path: "/extendArticle",
		icon: "coupon-o",
	},
	{
		title: "词源",
		path: "/etymology",
		icon: "list-switching",
	},
	{
		title: "我的",
		path: "/user",
		icon: "user-o",
	},
]);
watch(
	() => route.fullPath,
	(newPath, oldPath) => {
		active.value = route.path;
		r.value = newPath.split("/")[1];
	},
	{
		immediate: true,
	}
);
const changePath = path => {
	router.push(path.path);
};

const getLocation = () => {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
			position => {
				store.commit("SAVE_POSITION", {
					lat: position.coords.latitude,
					lng: position.coords.longitude,
				});
			},
			err => {
				console.log(err);
				Toast("定位失败");
			},
			{
				enableHighAccuracy: true,
				maximumAge: 1000,
			}
		);
	} else {
		Toast("定位失败");
	}
};

getLocation();
</script>

<style lang="less">
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
#app {
	height: 100vh;
	overflow: auto;
	background-color: #f2f2f2;
}
.van-search {
	padding: 0 !important;
}

.water-container {
	border-radius: 6px;
	box-shadow: 0 0 6px 1px #999;
	overflow: hidden;
}

.water-title {
	padding: 6px 10px;
	color: #222;
}
</style>
